<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开心农场</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #e0f7e0;
            text-align: center;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #2e7d32;
            text-shadow: 1px 1px 2px #81c784;
        }
        .farm-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 800px;
            margin: 0 auto;
        }
        .plot {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: #8d6e63;
            border: 3px solid #5d4037;
            border-radius: 5px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s;
        }
        .plot:hover {
            transform: scale(1.05);
        }
        .plant {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 40px;
        }
        .controls {
            margin: 20px 0;
            padding: 15px;
            background-color: #a5d6a7;
            border-radius: 10px;
            display: inline-block;
        }
        button {
            padding: 10px 15px;
            margin: 5px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #388e3c;
        }
        .seed-selector {
            margin: 15px 0;
        }
        .stats {
            background-color: #c8e6c9;
            padding: 10px;
            border-radius: 5px;
            margin: 10px auto;
            max-width: 400px;
        }
        .progress-bar {
            width: 100%;
            height: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin-top: 5px;
            overflow: hidden;
        }
        .progress {
            height: 100%;
            background-color: #4caf50;
            width: 0%;
            transition: width 0.5s;
        }
        .money {
            font-size: 24px;
            color: #f57f17;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>🌱 开心农场 🌾</h1>
    
    <div class="stats">
        <div>金钱: <span class="money">100</span> 元</div>
        <div>当前选择: <span id="current-seed">胡萝卜</span></div>
    </div>
    
    <div class="controls">
        <div class="seed-selector">
            <button onclick="selectSeed('carrot')">🥕 胡萝卜 (10元)</button>
            <button onclick="selectSeed('corn')">🌽 玉米 (20元)</button>
            <button onclick="selectSeed('watermelon')">🍉 西瓜 (30元)</button>
        </div>
        <button onclick="harvestAll()">一键收获</button>
    </div>
    
    <div class="farm-container" id="farm">
        <!-- 地块将通过JS动态生成 -->
    </div>
    
    <script>
        // 游戏状态
        const gameState = {
            money: 100,
            selectedSeed: 'carrot',
            seeds: {
                carrot: { name: '胡萝卜', price: 10, growthTime: 5, value: 20, emoji: '🥕' },
                corn: { name: '玉米', price: 20, growthTime: 8, value: 40, emoji: '🌽' },
                watermelon: { name: '西瓜', price: 30, growthTime: 12, value: 70, emoji: '🍉' }
            },
            plots: []
        };
        
        // 初始化农场
        function initFarm() {
            const farm = document.getElementById('farm');
            for (let i = 0; i < 9; i++) {
                const plot = document.createElement('div');
                plot.className = 'plot';
                plot.dataset.index = i;
                plot.dataset.state = 'empty';
                plot.dataset.progress = '0';
                plot.innerHTML = `
                    <div class="progress-bar"><div class="progress" style="width: 0%"></div></div>
                    <div class="plant"></div>
                `;
                plot.addEventListener('click', handlePlotClick);
                farm.appendChild(plot);
                gameState.plots.push({
                    state: 'empty',
                    plantType: null,
                    progress: 0,
                    interval: null
                });
            }
            updateMoneyDisplay();
        }
        
        // 选择种子
        function selectSeed(seedType) {
            gameState.selectedSeed = seedType;
            document.getElementById('current-seed').textContent = gameState.seeds[seedType].name;
        }
        
        // 处理地块点击
        function handlePlotClick(event) {
            const plotIndex = parseInt(event.currentTarget.dataset.index);
            const plot = gameState.plots[plotIndex];
            const plotElement = event.currentTarget;
            
            if (plot.state === 'empty') {
                // 种植
                const seed = gameState.seeds[gameState.selectedSeed];
                if (gameState.money >= seed.price) {
                    gameState.money -= seed.price;
                    updateMoneyDisplay();
                    
                    plot.state = 'growing';
                    plot.plantType = gameState.selectedSeed;
                    plot.progress = 0;
                    
                    plotElement.dataset.state = 'growing';
                    plotElement.dataset.plant = gameState.selectedSeed;
                    plotElement.querySelector('.plant').textContent = '🌱';
                    
                    // 更新进度条
                    updateProgressBar(plotIndex);
                    
                    // 开始生长计时器
                    plot.interval = setInterval(() => {
                        gameState.plots[plotIndex].progress += 1;
                        updateProgressBar(plotIndex);
                        
                        // 检查是否成熟
                        if (gameState.plots[plotIndex].progress >= seed.growthTime) {
                            clearInterval(plot.interval);
                            gameState.plots[plotIndex].state = 'ready';
                            plotElement.dataset.state = 'ready';
                            plotElement.querySelector('.plant').textContent = seed.emoji;
                        }
                    }, 1000);
                } else {
                    alert('金钱不足！');
                }
            } else if (plot.state === 'ready') {
                // 收获
                const seed = gameState.seeds[plot.plantType];
                gameState.money += seed.value;
                updateMoneyDisplay();
                
                // 重置地块
                resetPlot(plotIndex);
            }
        }
        
        // 更新进度条
        function updateProgressBar(plotIndex) {
            const plot = gameState.plots[plotIndex];
            const plotElement = document.querySelector(`.plot[data-index="${plotIndex}"]`);
            const seed = gameState.seeds[plot.plantType];
            const percent = (plot.progress / seed.growthTime) * 100;
            plotElement.querySelector('.progress').style.width = `${percent}%`;
            
            // 更新植物生长阶段外观
            if (percent < 33) {
                plotElement.querySelector('.plant').textContent = '🌱';
            } else if (percent < 66) {
                plotElement.querySelector('.plant').textContent = '🌿';
            } else {
                plotElement.querySelector('.plant').textContent = '🌳';
            }
        }
        
        // 重置地块
        function resetPlot(plotIndex) {
            const plot = gameState.plots[plotIndex];
            const plotElement = document.querySelector(`.plot[data-index="${plotIndex}"]`);
            
            if (plot.interval) {
                clearInterval(plot.interval);
            }
            
            plot.state = 'empty';
            plot.plantType = null;
            plot.progress = 0;
            plot.interval = null;
            
            plotElement.dataset.state = 'empty';
            plotElement.dataset.plant = '';
            plotElement.querySelector('.plant').textContent = '';
            plotElement.querySelector('.progress').style.width = '0%';
        }
        
        // 一键收获
        function harvestAll() {
            let harvested = false;
            gameState.plots.forEach((plot, index) => {
                if (plot.state === 'ready') {
                    const seed = gameState.seeds[plot.plantType];
                    gameState.money += seed.value;
                    resetPlot(index);
                    harvested = true;
                }
            });
            
            if (harvested) {
                updateMoneyDisplay();
            } else {
                alert('没有可以收获的作物！');
            }
        }
        
        // 更新金钱显示
        function updateMoneyDisplay() {
            document.querySelector('.money').textContent = gameState.money;
        }
        
        // 初始化游戏
        window.onload = initFarm;
    </script>
</body>
</html>